<template>
  <div class="sz">
    <div class="header">
      <top-bar :barObj="barObj"/>
    </div>
    <div class="content">
      <div class="item" style="margin:10px 0;">
        <div class="key">音频</div>
        <div class="val">
          <mt-switch v-model="value1"></mt-switch>
        </div>
      </div>
      <div class="item">
        <div class="key">视频</div>
        <div class="val">
          <mt-switch v-model="value2"></mt-switch>
        </div>
      </div>
      <div class="item">
        <div class="key">清晰度</div>
        <div class="val val1" @click="maskShow=true">
          <span>{{definition_val}}</span>
          <i class="iconfont icon-you"></i>
        </div>
      </div>
      <div class="item">
        <div class="key">直播封面</div>
        <div class="val val1">
          <span>超清</span>
          <i class="iconfont icon-you"></i>
          <input type="file" class="imgInput">
        </div>
      </div>
      <div class="item">
        <div class="key">直播间名称</div>
        <div class="val"></div>
      </div>
    </div>
    <div class="btn">确定</div>

    <div class="optionMask" v-show="maskShow" @click.stop="maskShow=false">
      <div class="main">
        <div class="item" @click="definition('流畅')">流畅</div>
        <div class="item" @click="definition('标清')">标清</div>
        <div class="item" @click="definition('高清')">高清</div>
        <div class="item" @click="definition('超清')">超清</div>
        <div class="item" @click="definition('超高清')">超高清</div>
        <div class="item" @click="maskShow=false">返回</div>
      </div>
    </div>
  </div>
</template>
<script>
import topBar from "@/components/topBar";

export default {
  data() {
    return {
      barObj: {
        isBack: true,
        backVal: "返回",
        title: "推流设置",
        isIcon: true
      },
      definition_val: "超清",
      value1: "",
      value2: "",
      maskShow: false
    };
  },
  methods: {
    definition(i) {
      console.log(i);
      this.definition_val = i;
      this.maskShow = false;
    }
  },
  components: { topBar }
};
</script>
<style lang="stylus" scoped>
.sz {
  .optionMask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    .main {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);

      .item {
        line-height: 1rem;
        background: #fff;
        text-align: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        color: rgba(102, 102, 102, 1);
      }
    }
  }

  .header {
    padding-top: 0.54rem;
    width: 7.5rem;
    height: 2rem;
    background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));
  }

  .content {
    width: 100%;

    .item {
      height: 1rem;
      background: #fff;
      padding: 0 0.3rem;
      line-height: 1rem;
      border-bottom: 1px solid rgba(118, 118, 118, 0.4);

      .key {
        float: left;
      }

      .val {
        float: right;
        margin-top: 0.2rem;
      }

      .val1 {
        float: right;
        margin-top: 0rem;
        color: rgba(153, 153, 153, 1);
        position: relative;

        input {
          height: 100%;
          width: 3rem;
          background: pink;
          position: absolute;
          right: 0;
          top: 0px;
          opacity: 0;
        }
      }
    }
  }

  .btn {
    width: 6.99rem;
    height: 0.95rem;
    line-height: 0.95rem;
    text-align: center;
    background: rgba(34, 143, 248, 1);
    border-radius: 0.04rem;
    color: #fff;
    margin: 20px auto;
  }
}
</style>
